<!-- 刻度组件
居于swiper5

-->
<template>
  <div class="gu-scale-box">
    <div v-if="scale.length>0" style="width: 100%;height: 64px;">
      <div class="show-box" :style="{'border-color':borderColor}">
        <div class="triangle" :style="{'border-top-color':borderColor}"></div>
        <swiper :options="swiperOption" ref="mySwiper" @slideChangeTransitionEnd="slideChangeEnd">
            <swiper-slide  v-for="(item,index) in scale" :key="index" >
              <div class="line-box">
                <div class="line-height" v-if="item.type ==1"></div>
                <div class="line-height" style="height: 18px;" v-if="item.type ==2"></div>
                <div class="line-height" :style="{fontSize:fontSize}"  style="height: 24px;" v-if="item.type ==3">
                </div>
                 <span class="amount" v-if="item.type ==3">{{item.amount}}</span>
              </div>
            </swiper-slide>
        </swiper>
      </div>
      <div class="left-title">
          <div class="name">
            {{scale[swiperIndex].name}}
          </div>
          <div class="value">
             {{scale[swiperIndex].amount}}
          </div>
          <div class="unit">
             {{scale[swiperIndex].unit}}
          </div>
      </div>
    </div>
  </div>
</template>

<script>
  import { swiper, swiperSlide } from 'vue-awesome-swiper'
  import 'swiper/dist/css/swiper.css'
  export default{
    name:"gu-scale-box",
    props:{
      scale:{
        type:Array,
        default:[]
      },
      fontSize:{
        type:String,
        default:"12px"
      },
      name:{
        type:String,
        default:"year"
      },
      borderColor:{
        type:String,
        default:"#c353ff"
      }
    },
    data(){
      return{
        swiperIndex:10,
        indData:{name:'',unit:'',amount:''},
        swiperOption:{
          centeredSlides:true,
          initialSlide:10,
          slidesPerView: 20,
          paginationClickable: false,
          spaceBetween: 0,
          slidesOffsetBefore:0,
          observer:true,//修改swiper自己或子元素时，自动初始化swiper
          observeParents:true//修改swiper的父元素时，自动初始化swiper
        }
      }
    },
    methods:{
      slideChangeEnd(){
        let swiper = this.$refs.mySwiper.swiper
        let ind = swiper.activeIndex
        this.swiperIndex = ind
        let direction = swiper.swipeDirection //往右边滚动 next 左边滚动 prev
        if(direction == 'prev' && ind>=20){
          return false
        }
        if(direction == "next" && ind<=40){
          return false
        }
        let item = this.scale[ind]
        let name = this.name
        this.$emit("swiperLover",direction,item,name)
      },
      slideToIndex(index){
        let swiper = this.$refs.mySwiper.swiper
        swiper.slideTo(index, 0, true)
      }

    },
    mounted() {
     // this.indData = this.scale[10]
    }
  }
</script>

<style scoped="scoped" lang="stylus">
  .gu-scale-box{
    width: 100%;
    touch-action: none;
    .left-title{
      width:60px;
      box-sizing:border-box;
      height:64px;
      float:left;
      color:#FFFFFF;
      text-align:right;
      box-sizing:border-box;
      padding-right:10px
      .name{
        font-size:14px;
        line-height:1.3;
      }
      .vaule{
        font-size:20px;
        font-weight:bold;
        font-weight:1.3;
      }
      .unit{
        font-size:10px;
        font-weight:1.3;
      }
    }
    .triangle{
      position:absolute;
      left:50%;
      top:0;
      margin-left:-4px;
      width: 0;
      height: 0;
      border-left: 4px solid transparent;
      border-right: 4px solid transparent;
      border-top: 8px solid red;
      z-index:999;
    }
    .show-box{
      width:calc(100% - 72px);
      height:64px;
      touch-action: none;
      float:right;
      border:2px solid #c353ff;
      padding:0 4px;
      position:relative;
    }
    .line-box{
      width: 100%;
      height: 50px;
      background: none;
      touch-action: none;
      position:relative;
      .amount{
        position:absolute;
        top:35px;
        left:50%;
        text-align:center;
        color:#FFFFFF;
        z-index:999;
        display:block;
        margin-left:-25px;
        width:50px;
      }
      .line-height{
        position:absolute;
        top:0;
        left:50%;
        height:12px;
        width:1px;
        background:#FFFFFF;
      }
    }
  }
</style>
